<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>

	<style type="text/css">
		.input-append~label[class="error"]{
			float: left !important;
		}
		.input-append{
			float: left;clear: both!important;
		}
	</style>
	<title>节目包管理</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
        var typeName = null;
        var tiprequired = "";
		$(document).ready(function() {
            tiprequired ="<spring:message code='tip.required'/>";
			//$("#name").focus();
			$("#inputForm").validate({
                submitHandler: function(form){
                    var table = document.getElementById("eleSourceList");
                    var rows = table.rows.length ;
                    if(rows==0){
                        alertx("<spring:message code='show.empt' />");
                        return false;
                    }else {
                        var ero=0;
                        for(var i=0;i<rows;i++){
                            if(document.getElementById("eleSourceList"+i).className!="error"){
                                ero=1;
                                break;
                            }
                        }
                        if(ero==0){
                            alertx("<spring:message code='show.empt' />");
                            return false;
                        } else {
                            var m=0;
                            var s=0;
                            var t=0;
                            for(var i=0;i<rows;i++){

                                if(document.getElementById("eleSourceList"+i).className!="error"){
                                    var a=document.getElementById("eleSourceList"+i+"_type").value;

									/*  switch (a)
									 {
									 case "multimedia":
									 m+=1;
									 break;
									 case "sub":
									 s+=1;
									 break;
									 case "title":
									 t+=1;
									 break;
									 }*/
                                    if(a=="multimedia"){
                                        m+=1;
                                    }else if(a=="sub"){
                                        s+=1;
                                    }else if(a=="title"){
                                        t+=1;
                                    }
                                }
                            }
                            if(m>1||s>1||t>1){
                                alertx("<spring:message code='tip.chooseone'/>");
                                return false;
                            }



                            loading('<spring:message code="common.subbmiting"/>');
                            timeVali($("#btnSubmit"));
                            form.submit();
                        }
                    }

                },
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
        var rows = {};
        <c:forEach items="${fns:getDictList('source_type')}" var="groupype">
        var row = {};
        row.type = '${groupype.value}';
        row.typeName = '${Locale eq 'zh_CN' ? groupype.label:groupype.enlabel}';
        rows['${groupype.value}'] = row;
        </c:forEach>

        function addRow(list, idx, tpl, row){
            var isFile = "yes";
            var isText = "yes";
            var exists = "yes";
            var egId = $("#egId").val();
            var type = rows[typeName];
            // console.log(row);
            //	console.log(type);
            if(typeName == "video" || typeName == "image"){
                $(list).append(Mustache.render(tpl, {idx: idx, delBtn: true, row: row ,isFile:isFile, egId:egId,type:type, tiprequired:tiprequired}));
            }else if(typeName == "sub" || typeName == "live"){
                $(list).append(Mustache.render(tpl, {idx: idx, delBtn: true, row: row ,isText:isText, egId:egId,type:type, tiprequired:tiprequired}));
            }else{
                console.log(type);
                if(type == null){
                    type = rows[row.type];
                }
                $(list).append(Mustache.render(tpl, {idx: idx, delBtn: true, row: row ,exists:exists, egId:egId,type:type, tiprequired:tiprequired}));
            }

			/*var type = $(list+idx).find("input[type='text']").eq(0);
			 if(typeName == null){
			 type.val(type.val());
			 }else{
			 type.val(typeName);
			 }*/

            typeName = null;
        }
        function delRow(obj, prefix,ty){
            $("input[name="+ty+"]").attr('disabled',false);
            var id = $(prefix+"_id");
            var delFlag = $(prefix+"_delFlag");
            if (id.val() == ""){
                $(obj).parent().parent().remove();
            }else if(delFlag.val() == "0"){
                delFlag.val("1");
                $(obj).html("&divide;").attr("title", "撤销删除");
                $(obj).parent().parent().addClass("error");
                $(obj).parent().parent().css("display",'none');
            }else if(delFlag.val() == "1"){
                delFlag.val("0");
                $(obj).html("&times;").attr("title", "<spring:message code='common.delete'/>");
                $(obj).parent().parent().removeClass("error");
            }
        }
        function batchDelete(){
            $("#eleSourceList").find("input[type='checkbox']:checked").each(function(){
                var prefix = $(this).attr("id");
                var obj = $(prefix+"_del");
                delRow(obj,prefix);
            });
        }
        function addSource(source){
         /*   if( eleSourceRowIdx>=3){
                alertx("<spring:message code='tip.chooseone'/>");
                return false
            }
*/
            var name = $(source).attr("name"); // $(this)表示获取当前被点击元素的name值
            console.log(name);
            typeName = name;
            addRow('#eleSourceList', eleSourceRowIdx, eleSourceTpl);
            eleSourceRowIdx = eleSourceRowIdx + 1;
            $(source).attr('disabled',true);

        }
	</script>
</head>

<body>
	<ul class="nav nav-tabs">
		<li>
			<a href="${ctx}/source/eleSourceGroup/">
				<spring:message code='Program.pack.list'/>
			</a>
		</li>
		<li class="active">
			<a href="${ctx}/source/eleSourceGroup/form?id=${eleSourceGroup.id}">
				<shiro:hasPermission name="source:eleSourceGroup:edit">
					<c:if test="${not empty eleSourceGroup.id}">
						<spring:message code="Program.modify"/>
					</c:if>
					<c:if test="${empty eleSourceGroup.id}">
						<spring:message code="Program.add"/>
					</c:if>
				</shiro:hasPermission>
				<shiro:lacksPermission name="source:eleSourceGroup:edit">
					<spring:message code="Program.info"/>
				</shiro:lacksPermission>
			</a>
		</li>
	</ul><br/>
<%--	<form:form id="inputForm" modelAttribute="eleSourceGroup" action="${ctx}/source/eleSourceGroup/next" method="post" class="form-horizontal">
		<form:hidden path="id"/>

		<!-- 
		<div class="control-group">
			<label class="control-label"><spring:message code='common.screen'/>：</label>
			<div class="controls">
                <sys:treeselect id="templet" name="templet.id" value="${eleSourceGroup.templet.id}" labelName="templet.name"
                                labelValue="${eleSourceGroup.templet.name}"
                                title="" url="/templet/eleTemplet/treeData" allowInput="false" cssClass="required" />
                                <span class="help-inline"><font color="red">*</font> </span>
			</div>
		</div>
		 -->
		<div class="control-group">
			<label class="control-label"><spring:message code='common.remarks'/>：</label>
			<div class="controls">
				<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="255" class="input-xxlarge "/>
			</div>
		</div>
			
		<div class="form-actions">
			<shiro:hasPermission name="source:eleSourceGroup:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="<spring:message code='common.next'/>"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="<spring:message code='common.back'/>" onclick="history.go(-1)"/>
		</div>
	</form:form>--%>

	<form:form id="inputForm" modelAttribute="eleSourceGroup" action="${ctx}/source/eleSourceGroup/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>

		<sys:message content="${message}"/>
		<div class="control-group" style="width: inherit !important;">
			<label class="control-label" style="width: 60px !important;"><spring:message code="common.dname"/>：</label>
			<div class="controls" style="margin-left: 20px !important;float: left">
				<form:input path="name" htmlEscape="false" maxlength="50" cssStyle="width: 150px" class="input-xlarge required"/>
				<span class="help-inline"><font color="red">*</font> </span>
			</div>

			<label class="control-label" style="width: 60px !important;"><spring:message code='common.remarks'/>：</label>
			<div class="controls" style="margin-left: 20px !important;float: left">
				<form:input path="remarks" htmlEscape="false"  maxlength="255" cssStyle="width: 350px" class="input-xlarge "/>
			</div>
		</div>

		<div class="control-group" style="margin-left:20px;margin-bottom:20px;" >
			<c:if test="${not empty templetSourceList}">
				<c:forEach items="${templetSourceList}" var="groupype">
					<c:if test="${'title' == groupype.sourceType || 'sub' == groupype.sourceType || 'multimedia' == groupype.sourceType }">
						<input type="button" value="<spring:message code='common.add'/>  ${fns:getDictLabel(groupype.sourceType, 'source_type', '')}" class="btn btn-default btn-lg"  name="${groupype.sourceType}" onclick="addSource(this);">
					</c:if>
				</c:forEach>
			</c:if>
				<%--	</div>--%>

			<c:if test="${empty templetSourceList}">
				<c:forEach items="${fns:getDictList('source_type')}" var="groupype">
					<c:if test="${'title' == groupype.value || 'sub' == groupype.value || 'multimedia' == groupype.value }">
						<input type="button" value="<spring:message code='common.add'/>  ${fns:getDictLabel(groupype.value, 'source_type', '')}" class="btn btn-default btn-lg"  name="${groupype.value}" onclick="addSource(this);">
					</c:if>
				</c:forEach>
			</c:if>

		<%--	<input type="button" value="<spring:message code='Batch.deletion'/>" class="btn btn-danger" onclick="batchDelete();">--%>
		</div>
		<input type="hidden" value="${eleSourceGroup.id}" id="egId" />
		<div class="control-group">

			<div class="controls" style="margin-left:10px;">
				<table id="contentTable" class="table table-striped table-bordered table-condensed">
					<thead>
					<tr>
						<th class="hide"></th>
						<th></th>
						<th><spring:message code='tip.showkind'/></th>
						<th><spring:message code='tip.showcontent'/></th>
						<th><spring:message code='common.remarks'/></th>
						<shiro:hasPermission name="source:eleSourceGroup:edit"><th width="10">&nbsp;</th></shiro:hasPermission>
					</tr>
					</thead>
					<tbody id="eleSourceList">
					</tbody>

				</table>
				<script type="text/template" id="eleSourceTpl">//<!--
						<tr id="eleSourceList{{idx}}">
							<td class="hide">
								<input id="eleSourceList{{idx}}_id" name="eleSourceList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
								<input id="eleSourceList{{idx}}_delFlag" name="eleSourceList[{{idx}}].delFlag" type="hidden" value="0"/>
								<input id="eleSourceList{{idx}}_group" name="eleSourceList[{{idx}}].group" type="hidden" value="{{egId}}"/>
							</td>
							<td>
								<input type="checkbox" id="#eleSourceList{{idx}}" />
							</td>
							<td>
								{{type.typeName}}
								<input id="eleSourceList{{idx}}_type" name="eleSourceList[{{idx}}].type" type="hidden" value="{{type.type}}" />							</td>
							</td>
							<td>
							<sys:treeselect id="eleSourceList{{idx}}_name" name="eleSourceList[{{idx}}].name" value="{{row.content}}" labelName="eleSourceList[{{idx}}].name"
                                    labelValue="{{row.name}}"
                                    title="" url="/source/eleSourceGroup/treeData?sourceType={{type.type}}" cssClass="required" allowInput="false" dataMsgRequired="{{tiprequired}}"/>
							 <span class="help-inline"><font color="red">*</font> </span></td>

							<td>
								<textarea id="eleSourceList{{idx}}_remarks" name="eleSourceList[{{idx}}].remarks" rows="1" maxlength="255" class="input-xxlarge ">{{row.remarks}}</textarea>
							</td>
							<shiro:hasPermission name="source:eleSourceGroup:edit"><td class="text-center" width="10">
								{{#delBtn}}<span class="close" data-type="{{type.type}}" onclick="delRow(this, '#eleSourceList{{idx}}','{{type.type}}')" title="<spring:message code='common.delete'/>" id="eleSourceList{{idx}}_del">&times;</span>{{/delBtn}}
							</td></shiro:hasPermission>
						</tr>//-->
				</script>
				<script type="text/javascript">
                    var eleSourceRowIdx = 0, eleSourceTpl = $("#eleSourceTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
                    $(document).ready(function() {
                        var data = ${fns:toJson(eleSourceGroup.eleSourceList)};
                        for (var i=0; i<data.length; i++){
                            addRow('#eleSourceList', eleSourceRowIdx, eleSourceTpl, data[i]);
                            eleSourceRowIdx = eleSourceRowIdx + 1;
                                var btn_v= $(".close:eq("+i+")").data('type');
                                $("input[name="+btn_v+"]").attr('disabled',true);
                        }
                    });
				</script>
			</div>
		</div>

		<div class="form-actions">
			<shiro:hasPermission name="source:eleSourceGroup:edit">
					<input id="btnCancel" class="btn" type="button" value="<spring:message code='common.back'/>" onclick="history.go(-1)" style="float:right;"/>
				<input id="btnSubmit" class="btn btn-primary" type="submit" value="<spring:message code='common.save'/>" style="float:right;margin-right: 10px"/>&nbsp;</shiro:hasPermission>

		</div>
	</form:form>
</body>
</html>